<!--
	作者：956911785@qq.com
	时间：2019年5月17日16:10:23
	描述：文化课收费
-->

<template>
 	<Modal title="收费项目" v-model="modal1" width="780px" @on-ok="sureWhkxm" @on-cancel="closeModel">
        <div style="width:100%;height: auto;overflow: hidden;">
        	<Form ref="params" :model="params" :rules="ruleValidate" :label-width="100" label-position="right">		
	        	<div style="width:100%;float:left;">
		        	<div style="width:50%;float: left;">
		        		<FormItem label="收费项目名称" prop="收费项目名称">
							<Input v-model.trim="params.xmmc" placeholder="请输入收费项目名称" clearable  style="width: 85%" />
						</FormItem>
		        	</div>
		        	<div style="width:30%;float: left;">
		        		<FormItem label="项目费用" prop="fee">
							<Input v-model.trim="params.fee" placeholder="请输入该项目的费用" clearable  style="width: 70%" />
						</FormItem>
		        	</div>
		        	<div style="width:20%;float: left;text-align: center;">
		        		<Button type="info" style="float:left;" v-on:click="addwhkxm()" >添加</Button>
		        	</div>
	        	</div>	
        	</Form>	
        	
        	<div style="width:100%;float:left;margin-top:10px;height:50px;line-height:50px;">
	        	<div style="padding-left:2%;text-align: left; float: left;color:#319ba1;">已有项目</div>
        	</div>
        	
        	
        	<div v-for="(xm, index) in xms"  style="width:100%;float: left;overflow: hidden;border-top: 1px solid #ebebeb;padding-top:8px;padding-bottom:8px;">
        		<div style="width:80%;float: left;">
        			<label style="padding-left:3%;float:left;width:100%;">项目名称：{{xm.xmmc}}</label>
        			<label style="padding-left:3%;float:left;width:100%;">费用：{{xm.fee}}</label>
        		</div>
        		<div style="width:20%;float: left;">
        			<a style="color:#319ba1;" v-on:click="delXm(index)">删除</a>
        		</div>
        	</div>
	    </div> 
 	</Modal>
</template>

<script>
	
	export default {
		name:"whksf",
		props: {
    		whkxm:{
    			type:Array,
    			required:true
    		}
    	},
		data() {
			//长度控制
			const lenPass = (rule, str, callback) => {
				if(str.length>rule.length){
				  	callback(new Error('字符串长度在1-'+rule.length+'之间！'));
				}
				return callback();
			};
			//正数控制
			const zsPass = (rule, value, callback) => {
			    let reg = /^[1-9]|[1-9][0-9]*$/; 
				if(!reg.test(value)){
				    callback(new Error('请输入正数！'));
				}else{
				  	return callback();
				}
			};
			return {
				modal1:false,
				xms:[],
				params:{
					xmmc:'',
					fee:'',
				}, 
				ruleValidate: {
					xmmc: [
						{required: true,message: '请输入收费项目名称！',trigger: 'blur'},
						{length:50,validator:lenPass,trigger:'blur'},
					],
					fee: [
						{required: true,message: '请输入项目的费用！',trigger: 'blur'},
						{validator:zsPass,trigger:'blur'},
					]
				}
			}
		},
		methods: {
			//添加确定
			addwhkxm: function(values){	
				const whkxm=this.params;
				if(whkxm.xmmc==""){
					this.$Modal.error({
                        title: "失败",
                        content: "请输入收费项目名称！"
                    });	
                     return;
				}
				if(whkxm.fee==""){
					this.$Modal.error({
                        title: "失败",
                        content: "请输入项目的费用！"
                    });	
                    return;
				}
				let reg = /^[1-9]|[1-9][0-9]*$/; 
				if(!reg.test(whkxm.fee)){
				    this.$Modal.error({
                        title: "失败",
                        content: "项目费用请输入正数！"
                    });	
                    return;
				}
				
				this.xms.push(whkxm);
				this.params={
					xmmc:'',
					fee:'',
				};
			},
			
			//删除
			delXm (index) {
                this.xms.splice(index, 1);
            },
           
        
			//确定
			sureWhkxm:function(){
				this.modal1=false;
				this.$emit("onsure",this.xms);
			},
			
			closeModel(){
				this.modal1=false;
			}
			
		},
		mounted() {
		},
		watch:{
			modal1:function(newvalues,oldvalues){
			 	if(newvalues){
			 		this.params={
						xmmc:'',
						fee:'',
					};
					this.xms=[...this.whkxm];
			 	}
			}
		}	
	}
</script>

<style>
	
</style>



